<template>
  <component>
    <div v-if='testType !== undefined'>
<!--      项-->
      <div>
        <span style='font-size: 3em'>
          {{testType.limits}}
        </span>
        <span class='second-text'>项</span>

      </div>
      <div>
        <span class='second-text'>{{testType.name}}</span>
        <div style='display: inline;float: right;'>
          <template v-if='testType.errors'>
            <div class='second-text' style='width: 1.1em;height: 1.1em;background-color:#F1C042;display: inline-block;vertical-align: middle;' />
            <span class='second-text' style='color: #F1C042;padding-right: 1em;padding-left: 0.6em'>发现异常</span>
          </template>
          <template v-else>
            <div class='second-text' style='width: 1.1em;height: 1.1em;background-color:#74FA4C;display: inline-block;vertical-align: middle;' />
            <span class='second-text' style='color: #285F18;padding-right: 1em;padding-left: 0.6em'>无异常</span>
          </template>

        </div>
      </div>

      <div style='height: 0.2em;background-color: #F1C041'/>
      <div class='scroll' :style='width'>
        <ItemTable :items='testType.items'/>
      </div>

      <div style='height: 0.2em;background-color: #E9E9E9'/>
      <div align='center'>
        <div :class='clazz' @click='changeScroll' />
      </div>

    </div>
  </component>
</template>

<script setup lang='ts'>
import { defineProps, PropType,ref } from 'vue';
import { Itemtype } from './ItemTable.vue'
import ItemTable from './ItemTable.vue'

export interface TestType {
  limits: number,
  name: string,
  items: Itemtype[],
  errors: boolean
}

defineProps({
  testType: {
    type: Object as PropType<TestType>
  }
})

let width = ref('height: 8em');
let clazz = ref('trangle')
function changeScroll () {
  if (width.value === 'height: 8em') {
    width.value = 'auto';
    clazz.value = 'trangle-revers';
  } else if (width.value === 'auto') {
    width.value = 'height: 8em';
    clazz.value = 'trangle';
  }
}

</script>

<style scoped lang='sass'>
.second-text
  font-size: 1.2em
  font-weight: normal
.trangle
  height: 0em
  width: 0em
  border-top: solid 1em #F1C040
  border-left: solid 1em transparent
  border-right: solid 1em transparent
.trangle-revers
  height: 0em
  width: 0em
  border-bottom: solid 1em #F1C040
  border-left: solid 1em transparent
  border-right: solid 1em transparent
.scroll
  overflow: hidden
</style>
